:root {
  --list-loading-height: 50px;
  --list-finished-height: 50px;
  --list-error-height: 50px;
  --list-loading-color: #888;
  --list-finished-color: #888;
  --list-error-color: #888;
  --list-loading-font-size: var(--font-size-md);
  --list-finished-font-size: var(--font-size-md);
  --list-error-font-size: var(--font-size-md);
}

.var-list {
  &__detector {
    width: 100%;
  }

  &__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--list-loading-height);
    font-size: var(--list-loading-font-size);
    color: var(--list-loading-color);
  }

  &__loading-text {
    margin-right: 10px;
  }

  &__finished {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--list-finished-height);
    font-size: var(--list-finished-font-size);
    color: var(--list-finished-color);
  }

  &__error {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--list-error-height);
    font-size: var(--list-error-font-size);
    color: var(--list-error-color);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}
